Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: [FC-0044] Unit page - render xblock component #964

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

ihor-romaniuk
Copy link
Contributor

@ihor-romaniuk ihor-romaniuk commented Apr 25, 2024

Settings

EDX_PLATFORM_REPOSITORY: https://github.com/openedx/edx-platform.git
EDX_PLATFORM_VERSION: master

TUTOR_GROVE_WAFFLE_FLAGS:
  - name: contentstore.new_studio_mfe.use_new_unit_page
    everyone: true

TUTOR_GROVE_MFE_LMS_COMMON_SETTINGS:
  MFE_CONFIG:
    ENABLE_UNIT_PAGE: true

Description

Render xblock components on the Course Unit page.

Issue: openedx/platform-roadmap#321

Testing instructions

  • Run master devstack.
  • Start platform make dev.up.lms+cms+frontend-app-course-authoring and make checkout on this branch.
  • Enable the new Unit page by adding a waffle flag contentstore.new_studio_mfe.use_new_unit_page in the CMS admin panel.
  • Go to the Course Unit page from the Course Outline page.
  • Add a new xblock component.

@openedx-webhooks
Copy link

openedx-webhooks commented Apr 25, 2024

Thanks for the pull request, @ihor-romaniuk!

What's next?

Please work through the following steps to get your changes ready for engineering review:

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

  • If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
    • This process (including the steps you'll need to take) is documented here.
  • If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

  • Dependencies

    This PR must be merged before / after / at the same time as ...

  • Blockers

    This PR is waiting for OEP-1234 to be accepted.

  • Timeline information

    This PR must be merged by XX date because ...

  • Partner information

    This is for a course on edx.org.

  • Supporting documentation
  • Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Update the status of your PR

Your PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate.

🔘 Let us know that your PR is ready for review:

Who will review my changes?

This repository is currently maintained by @openedx/2u-tnl. Tag them in a comment and let them know that your changes are ready for review.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

  • The size and impact of the changes that it introduces
  • The need for product review
  • Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

@openedx-webhooks openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Apr 25, 2024
@ihor-romaniuk ihor-romaniuk changed the title Romaniuk/render xblock component feat: [FC-0044] Unit page - render xblock component Apr 25, 2024
@ihor-romaniuk ihor-romaniuk marked this pull request as ready for review April 26, 2024 14:11
@ihor-romaniuk ihor-romaniuk requested a review from a team as a code owner April 26, 2024 14:11
@ihor-romaniuk ihor-romaniuk marked this pull request as draft April 26, 2024 14:11
@e0d
Copy link

e0d commented Apr 29, 2024

@ihor-romaniuk Can you resolve the conflicts and push to facilitate reviewing?

@PKulkoRaccoonGang PKulkoRaccoonGang self-assigned this Apr 30, 2024
@PKulkoRaccoonGang PKulkoRaccoonGang added the create-sandbox open-craft-grove should create a sandbox environment from this PR label Apr 30, 2024
Copy link

codecov bot commented Apr 30, 2024

Codecov Report

Attention: Patch coverage is 34.21053% with 200 lines in your changes missing coverage. Please review.

Project coverage is 90.69%. Comparing base (a9a73ef) to head (20af604).
Report is 81 commits behind head on master.

Files Patch % Lines
...k-content/iframe-wrapper/tools/iframe-connector.js 0.00% 82 Missing and 14 partials ⚠️
...nit/course-xblock/xblock-content/XBlockContent.jsx 8.88% 41 Missing ⚠️
...ck/xblock-content/iframe-wrapper/iframe-wrapper.js 0.00% 27 Missing and 3 partials ⚠️
src/course-unit/course-xblock/utils.js 0.00% 7 Missing ⚠️
...block/xblock-content/iframe-wrapper/tools/utils.js 36.36% 3 Missing and 4 partials ⚠️
src/course-unit/data/api.js 63.63% 4 Missing ⚠️
src/course-unit/data/slice.js 0.00% 4 Missing ⚠️
src/course-unit/data/thunk.js 80.00% 4 Missing ⚠️
src/course-unit/course-xblock/CourseXBlock.jsx 91.42% 3 Missing ⚠️
src/course-unit/CourseUnit.jsx 77.77% 1 Missing and 1 partial ⚠️
... and 1 more
Additional details and impacted files
@@            Coverage Diff             @@
##           master     #964      +/-   ##
==========================================
- Coverage   92.12%   90.69%   -1.44%     
==========================================
  Files         685      692       +7     
  Lines       12133    12417     +284     
  Branches     2642     2705      +63     
==========================================
+ Hits        11177    11261      +84     
- Misses        920     1098     +178     
- Partials       36       58      +22     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@PKulkoRaccoonGang
Copy link
Contributor

By analogy with similar functionality related to iframes developed in the frontend-app-library-authoring, this code is not tested.

@ihor-romaniuk ihor-romaniuk marked this pull request as ready for review April 30, 2024 16:31
@PKulkoRaccoonGang PKulkoRaccoonGang added create-sandbox open-craft-grove should create a sandbox environment from this PR and removed create-sandbox open-craft-grove should create a sandbox environment from this PR labels Apr 30, 2024
@PKulkoRaccoonGang
Copy link
Contributor

Screen.Recording.2024-04-30.at.19.40.34.mov

fix: [AXIMST-27] Unit page - change iframe pararm for display xblock content (#151)

feat: [AXIMST-52] display unit and xblock render errors (#191)

* feat: [AXIMST-52] display unit and xblock render errors

* fix: after discussion

* fix: after review

feat: Course unit - Rendering xblocks in iframes (#201)

* feat: added xblock render engine

* feat: connected iframe template

* feat: CSS and JS transfering

* feat: show video xblock

* feat: added multiply xblocks

* feat: rendering advanced components

* fix: add solution for request from within the iframe

* feat: iframe height

* refactor: code refactoring

* fix: fixed platform ajax prefix

* refactor: global refactoring

* refactor: show LTI xblock

* refactor: removed old xblock-content

* refactor: code refactoring

* refactor: some refactoring

* refactor: refactoring

* refactor: code refactoring

* refactor: refactoring after review

---------

Co-authored-by: monteri <lansevermore>

feat: [AXIMST-739] added xblock actions (#218)

* feat: [AXIMST-739] added xblock actions

* refactor: code refactoring

* refactor: refactoring after review

fix: after cherru-pick

fix: after cherry-pick

refactor: removed canEdit mock (#224)

fix: [AXIMST-655] fixed position of the view-port after loading the unit page (#217)

fix: [AXIMST-719] Course unit - Xblock problems (#213)

* fix: [AXIMST-719] fixed xblock problems

* fix: added asset and static replacer

* feat: added style extractor

* refactor: code refactoring

* refactor: after review

fix: [AXIMST-718] Course unit - Created logic for getting CSRF token (#226)

* fix: created logic for getting csrf token

* fix: usage of csrfTokenData

* refactor: code refactoring

---------

Co-authored-by: monteri <lansevermore>

fix: [AXIMST-745] added studioBaseUrl for static paths (#228)

refactor: [AXIMST-746] Unit page performance refactoring (#229)

Co-authored-by: Kyrylo Hudym-Levkovych <[email protected]>

fix: [AXIMST-785] fixed discard logic (#232)

feat: [AXIMST-800] Course unit - Added Collapse and Expand all buttons for xblocks (#234)

* feat: [AXIMST-800] added Collapse and Expand all buttons for xblocks

* feat: added tests

refactor: code refactoring
@open-craft-grove
Copy link

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

@open-craft-grove
Copy link

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

@brian-smith-tcril
Copy link
Contributor

Did a little quick testing on the sandbox. Most things look great! The randomized content block appears to be broken though.

  • Expanding the Randomized Content Block section shows nothing
  • Clicking the pencil icon to edit the randomized content block section does nothing

Copy link
Contributor

@arbrandes arbrandes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a couple of minor problems with this, and a really big one. Let's start with the small ones:

  • Even though rendering mostly works in the sandbox, it doesn't seem to work in Tutor dev mode: we'd need to investigate why that is
  • We're getting a bunch of ugly console errors (from prop-types to invalid DOM components): if we were to merge this, I'd ask all of them to be fixed first, whether they were introduced by this PR or not

And the big one: there is a major architectural challenge with relying on the backend to render XBlocks. One that frontend-app-library-authoring has always suffered from: it's buggy and slow. All it takes is one look at iframe-wrapper.js to understand why. We did our best, here and in Library Authoring, to replicate the environment that XBlock frontend code expects, but:

  • We have to replicate the whole shebang (and it's a large one) independently for each rendered block. There's no way this will ever be performant enough for production use, and by collapsing them all by default we're just using bad engineering as an excuse for bad UX, which is the worst kind of UX crime
  • The required shimming is so complicated that it's bound to fail for some XBlock types; we will be forever chasing down these not-quite-edge cases.

Which is all to say: we need to pivot. Even if we merge this and don't enable it by default, what value will there be in letting people try something that we know isn't going to work in the future anyway?

So, as far as the unit page is concerned: is there a way we can let the backend render all blocks in a unit, and we just display the result "chromelessly" in a single iframe per unit? What would happen with the so-called "new editors" when launched from within the iframe?

(As far as rethinking the architecture, we're simply going to have to gather our best heads and figure out a sane future for XBlocks in a split frontend/backend world. We already started, but we need to take it forward.)

Comment on lines +147 to +185
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/src/jquery.immediateDescendents.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/xblock/core.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/xblock/runtime.v1.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/xblock/resource/drag-and-drop-v2/public/js/vendor/virtual-dom-1.3.0.min.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/xblock/resource/drag-and-drop-v2/public/js/drag_and_drop.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/xblock/resource/drag-and-drop-v2/public/js/translations/en/text.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/src/utility.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/src/logger.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/vendor/jquery-migrate.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/vendor/underscore.string.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/vendor/backbone.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/edx-ui-toolkit/js/utils/string-utils.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/edx-ui-toolkit/js/utils/html-utils.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/cms/js/require-config.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/js/factories/context_course.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/js/sock.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/js/factories/container.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/debug_toolbar/js/toolbar.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/vendor/url.min.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/vendor/URI.min.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/models/xblock_info.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/views/xblock.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/views/utils/xblock_utils.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/utils/view_utils.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/utils/module.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/views/baseview.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/views/feedback_notification.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/views/feedback_prompt.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/utils/handle_iframe_binding.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/utils/templates.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/common/js/components/views/feedback.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/js/vendor/requirejs/text.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/xblock/resource/split_test/public/js/split_test_author_view.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/WordCloudBlockDisplay.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/xblock/resource/library_content/public/js/library_content_edit.js"></script>
<script type="text/javascript" src="${studioBaseUrl}/static/studio/bundles/HtmlBlockDisplay.js"></script>
<script type="text/javascript" src="https://app.getbeamer.com/js/beamer-embed.js"></script>
<script type="text/javascript" src="https://studio.edx.org/c4x/edX/DemoX/asset/jquery.loupeAndLightbox.js"></script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No wonder it's slow to load each iframe!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Surely not all of these are required. e.g. Three of them are just for drag-and-drop-v2 and definitely not used by any other XBlocks.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right. The frontend would have to make a request to the backend to ask it which JS files are needed for a given XBlock (or XBlock type).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought that when the backend renders the XBlock, it will include the "common" JS plus whatever JS that specific XBlock has requested (e.g. virtual-dom for drag and drop). This is still mostly being rendered by the backend right?

@ormsbee
Copy link

ormsbee commented Jul 16, 2024

Putting this here because I'm not sure where else to have this conversation.

Assuming that:

  1. Individually rendering each block with its associated assets is too expensive without significant changes (even if we're just downloading the assets needed for each block, and not everything with every block).
  2. We still want the iframe to guard against authored JS compromising other authors.

What if we render the entire Unit as one thing on the backend, iframe that in, but make it so that the UX pieces (e.g. the Edit button) post messages that the parent course authoring MFE listens for? Almost all the UIs spawn modals these days. There should be very little UX logic we'd have to encode into the Unit rendering. In fact, we might be able to eventually replace the "Preview" button functionality with something more inline in the Unit.

Another fancier thing that I'm not sure about the feasibility of is having the Unit render, but have it leave blank divs and report the locations of those to the MFE so that the MFE can create appropriate overlays with title and edit UX.

The goal in both cases would be to leave XBlock rendering more or less as-is, but provide just enough of a shim to allow all the UX complexity to be implemented on the MFE side.

@open-craft-grove
Copy link

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

@mphilbrick211
Copy link

@ihor-romaniuk @arbrandes - hi all! is this still in progress?

@bradenmacdonald
Copy link
Contributor

bradenmacdonald commented Jul 25, 2024

@ormsbee That's pretty much what we're already doing for the learner MFE right? It's possible to take that approach for now, though I think it's far from ideal.

One example challenge is the tags: each XBlock shows how many tags it has, and if everything's in the MFE, that tag count gets updated instantly whenever you make any edits to the tags. But if we are rendering the whole unit on the backend, we have to refresh the whole unit view anytime the user makes changes to any tags. Not a big deal but it's slower and uglier (flash of reloading the whole thing) than it should be.

But perhaps this is fine for the short term, and for long term we could plan for something like my proposal to simplify rendering of most XBlocks to the point where we can easily render them in the MFE independently.

Another fancier thing that I'm not sure about the feasibility of is having the Unit render, but have it leave blank divs and report the locations of those to the MFE so that the MFE can create appropriate overlays with title and edit UX.

I don't think that's feasible unfortunately.

@arbrandes arbrandes marked this pull request as draft July 25, 2024 18:15
@mphilbrick211
Copy link

[Inform] This PR will remain open as a draft for reference until the community decides the best way to tackle the problem

@mphilbrick211 mphilbrick211 added the FC Relates to an Axim Funded Contribution project label Jul 30, 2024
@open-craft-grove
Copy link

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
create-sandbox open-craft-grove should create a sandbox environment from this PR FC Relates to an Axim Funded Contribution project open-source-contribution PR author is not from Axim or 2U
Projects
Status: Waiting on Author
Development

Successfully merging this pull request may close these issues.

10 participants